html {
    font-size: 20px;
    font-size: 5.33333vw;
    background:#000;
}
@media screen and (max-width:320px) {
    html {
        font-size: 17.06667px
    }
}
@media screen and (min-width:540px) {
    html {
        font-size: 28.8px
    }
}
@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        opacity: 1;
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        opacity: 1;
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}
@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}
@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}
@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}
@-webkit-keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg)
    }
}
@keyframes shake {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg)
    }
}

.jumping_alert {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-transition: visibility 1s linear;
    transition: visibility 1s linear;
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 309
}
.jumping_alert.in {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}
.jumping_alert.out {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
    pointer-events: none;
    visibility: hidden
}
.jumping_alert_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7.5rem;
    margin-left: -5.225rem;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 1rem;
    width: 10.45rem;
    height: 12.5rem;
    border-radius: .75rem;
    color: #e9ba12;
    text-align: center;
    background: rgba(0, 0, 0, .8)
}
.jumping_alert_tip {
    position: relative;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    width: 7.75rem;
    height: 6.25rem
}
.jumping_alert_tip::before {
    position: absolute;
    left: 50%;
    top: 0;
    content: "";
    height: 6.25rem;
    border: 1px dashed #e9ba12;
    -webkit-transform: translateX(-50%) scaleX(.5);
    transform: translateX(-50%) scaleX(.5)
}
.jumping_alert_tip_arrow {
    position: absolute;
    top: 2.25rem;
    left: 0;
    background-image: url(https://yinli-qixi-run.varwey.com/2023_ca/u_chess/images/sprite_game.png);
    background-position: 0 0;
    background-size: 2.125rem 1.825rem;
    background-repeat: no-repeat;
    width: 2.125rem;
    height: 1.825rem
}
.jumping_alert_tip_arrow.type_right {
    position: absolute;
    left: auto;
    right: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}
.jumping_alert_desc {
    margin: .75rem auto;
    font-size: .6rem
}
.jumping_alert_small {
    margin: .75rem auto .9rem;
    text-align: center;
    font-size: .5rem;
    color: #51b236
}
.jumping_alert_small em {
    color: #e9ba12
}
.jumping_alert_text {
    font-size: 1.6rem
}
.jumping_alert_btn {
    margin: .75rem auto;
    width: 5.5rem;
    height: 2rem;
    font-weight: 300;
    letter-spacing: .1rem;
    text-align: center;
    line-height: 2rem;
    color: #e9ba12;
    font-size: 1.2rem;
    border: 1px solid #e9ba12;
    border-radius: 2rem
}
.jumping_game {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}
.jumping_game canvas {
    width: 100%!important;
}
.jumping_game .score{
    font-size:1.6rem;
    position:absolute;
    top:0.5rem;
    right:0.5rem;
    color:#f00;
    line-height:1;
}
.jumping_load,.jumping_start{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#000;
    z-index:10000000;
}
.jumping_start{
    display:none;
    background:none;
}
.jumping_load .center{
    width:80%;
    height:6rem;
    position:absolute;
    top:50%;
    left:50%;
    margin:-3.5rem 0 0 -40%;
}
.jumping_load .robot{
    width:3rem;
    height:5rem;
    background:url(https://yinli-qixi-run.varwey.com/2023_ca/u_chess/images/robot.png) no-repeat center top;
    background-size:contain;
    margin:0 auto 0.5rem;
}
.jumping_load .process{
    width:100%;
    height:0.5rem;
    border-radius:999px;
    background:#4f4f4f;
    overflow:hidden;
}
.jumping_load .curr_process{
    width:0%;
    height:0.8rem;
    background:#0160a5;
    -webkit-transition:all linear 0.1s;
}
